<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义组件</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        html,body{
            margin: 0px;
            padding: 0px;
            padding-top: 100px;
            padding-left: 100px;
        }
        .switchBox{
            width:60px;
            height: 30px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 15px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.25s;
        }
        .switchBox.active{
            background-color: rgb(4, 190, 2);
        }
        .switchIcon{
            float: left;
            width: 24px;
            height: 24px;
            border-radius: 12px;
            margin-top: 2px;
            margin-left: 2px;
            border: 1px solid #ccc;
            background-color: #fff;
            box-shadow: 0 1px 3px rgb(0,0,0,0.4);
        }
        .switchBox.active .switchIcon{
            margin-left: 34px;
        }
    </style>
</head>
<body>
    <div id="components-demo">
        <wxbutton type="primary" size="mini"></wxbutton>
        <wxbutton type="warn"></wxbutton>
        <wxbutton type="default"></wxbutton>
        <button-counter></button-counter>
        <blog-post title="My journey with Vue" content=" every component must have a single root element"></blog-post>
        <blog-post title="Blogging with Vue"></blog-post>
        <blog-post title="Why Vue is so fun"></blog-post>
        <myswitch :checked="true"></myswitch>
    </div>
    

</body>
    <script>
        // 定义一个名为 button-counter 的新组件
        Vue.component('button-counter', {
            data: function () {
                return {
                count: 0
                }
            },
            template: '<button v-on:click="count++">你点击我 {{ count }} 次</button>'
        })


        Vue.component('myswitch', {
            props:['checked'],
            data: function () {
                return {
                    active:false
                }
            },
            methods:{
                change(){
                    this.active = ! this.active
                }
            },
            created(){
                this.active = this.checked
            },
            template:'<div @click="change" :class="{switchBox:true,active:active}"><div class="switchIcon"></div></div>'
        })


        Vue.component('blog-post', {
            props: ['title','content'],
            template: '<div><h3>{{ title }}</h3><div v-html="content"></div></div>'
        })
        Vue.component('wxbutton',{
            props:['type','size'],
            data: function() {
                return{
                    style:{
                        background:'#fff',
                        color:'#000',
                        width:'100px',
                        height:'30px'
                    }
                }
            },

            methods:{

            },

            created(){
                //确定颜色
               let style = {
                        background:'#fff',
                        color:'#000',
                        width:'100px',
                        height:'30px'
                }
                switch(this.type){
                    case 'primary':
                        style.background = '#1aad19'
                        style.color = '#fff'
                        break;
                    case 'warn':
                        style.background = '#ff0000'
                        style.color = '#fff'
                        break;
                    default:
                        break;
                }
                //确定大小
                if(this.size == 'mini'){
                    style.width = '50px'
                    style.height = '30px'
                }
                this.style = style
            },
            template:`
            <div>
                <button :style="style">登录</button>
            </div>`
        })

         var app = new Vue({
             el: '#components-demo' 
        })
    </script>
</html>